<template>
  <div class="word">

    <Head />
    <div class="search">
      <p>人教版小学拼写</p>
      <p class="wen">
        <input type="text" placeholder="英汉互译词典输入框" />
        <img src="../assets/sousuo.png" class="pos" />
      </p>
      <img src="../assets/guanbi(1).png" @click="back()" />
    </div>
    <div class="con">
      <div class="page-bar left">
        <ul>
          <li v-if="list_in != stop">
            <a @click="before()" style="padding-left: 30%"><img src="../assets/xiangshang.png" /></a>
          </li>
          <li v-else>
            <a class="banclick"><img src="../assets/xiangshang.png" /></a>
          </li>
          <li v-for="(item, index) in show_list" v-bind:class="{ active: list_in == index }" :key="index">
            <a @click="select(index)" style="diplay: block">
              <p>{{ item.title }}</p>
              <p class="size">
                <span>条目{{ item.unit_total }}</span>- <span>已学{{ item.unit_work_total }}</span>
              </p>
            </a>
          </li>
          <li v-if="start != list_in">
            <a @click="next()" style="padding-left: 30%"><img src="../assets/xiangxia.png" /></a>
          </li>
          <!-- @click="xia()" id="xia" -->
          <li v-else>
            <a class="banclick"><img src="../assets/xiangxia.png" /></a>
          </li>
        </ul>
      </div>

      <div class="right">
        <div v-show="cur == 0">
          <!-- <p
            style="
              text-align: center;
              padding: 20px 0;
              font-size: 30px;
              color: #333333;
            "
          >
            {{ con.desc }}
          </p> -->
          <div class="tops">
            <div class="tab" v-for="(item, index) in sz" :key="index">
              {{ item }}
            </div>
          </div>
          <div class="keyboard">
            <div class="board">
              <div class="boards" v-for="(item, index) in boards" :key="index" @click="
                  word(item);
                  demoa(index);
                " :class="{ back: demo == index }">
                {{ item }}
              </div>
            </div>
            <div class="board">
              <div class="boards" v-for="(item, index) in boardsb" :key="index" @click="
                  word(item);
                  demoa1(index);
                " :class="{ back: demo1 == index }">
                {{ item }}
              </div>
            </div>
            <div class="board">
              <div class="boards boardss" v-for="(item, index) in boardsc" :key="index" @click="
                  word(item);
                  demoa2(index);
                " :class="{ back: demo2 == index }">
                {{ item }}
              </div>
            </div>
            <div class="board">
              <div class="boards boardsss" v-for="(item, index) in boardsd" :key="index" @click="word(item)">
                {{ item }}
              </div>
            </div>
            <div class="bottom">
              <span class="span1" @click="bjs">标记</span>
              <span class="span2" @click="nextt()">提交</span>
            </div>
          </div>
        </div>
        <!-- <div v-show="cur == 1"></div> -->
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
  import {
    spell,
    spell2
  } from '@/api'
  import axios from "axios";
  import Head from "@/components/Head.vue";
  import Footer from "@/components/Footer.vue";
  export default {
    name: "Word",
    components: {
      Head,
      Footer,
    },
    data() {
      return {
        demo: null,
        demo1: null,
        demo2: null,
        all: 5, //总页数
        cur: 0, //当前页码
        totalPage: 1, //当前条数
        list: [],
        show_list: [],
        list_in: 0,
        start: 12,
        stop: 0,
        con: {},
        indexss: 0,
        cons: [],
        sz: [],
        sz_index: 0,
        boards: ["A", "B", "C", "D", "E", "F", "J", "H", "I", "G"],
        boardsb: ["K", "L", "M", "N", "O", "P", "Q", "R", "S"],
        boardsc: ["小写", "T", "U", "V", "W", "X", "Y", "Z"],
        boardsd: ["SPACE", "DELETE"],
        // 定义
        bid: "",
        ida: "",

        // 返回index
        index_cs: 0,
        zonglis: [],
        indexs: 0,
        // 课程id
        course_id: "",
        //年级id
        grade_id: "",
        //类型id
        mold_id: "",
        //单元id
        unit_id: "1",
      };
    },
    created() {
      // this.Wordread();
      let str = " ";
      for (let x = 0; x < 12; x++) {
        this.sz[x] = str;
        // console.log(this.sz)
      }
      this.course_id = this.$route.query.course_id;
      this.grade_id = this.$route.query.grade_id;
      this.mold_id = this.$route.query.mold_id;
      console.log(this.$route.query, 'options')
      this.dataListFn();

      // 获取id
      let as = this.$route.query.unit_id;
      console.log(as);
      // ida id值
      this.ida = as;
      // 获取index
      // let ints = this.$route.query.intex;
      // let id = this.$route.query.ida;
      // console.log(as);
      //接收返回

      let index_c = this.$route.query.intex;
      // this.index_cs = index_c;
      console.log(this.$route.query.intex, 3636);

      // console.log(index_c, 3356);
      let that = this;
      let data = {
        unit_id: as
      }
      spell(data).then((response) => {
        console.log(response);
        that.cons = response.data.neirong;
        that.con = this.cons.neirong[this.$route.query.intex || 0];
        that.indexss = index_c || 0;
      })

      // axios
      //   .get("/api/WordSpell/index", {
      //     params: {
      //       unit_id: as
      //     }
      //   })
      //   .then((res) => {
      //     console.log(res, 999)
      //     that.cons = res.data.data;
      //     // console.log(res.data.data.neirong[index_c])
      //     that.con = this.cons.neirong[this.$route.query.intex || 0];
      //     console.log(res);
      //     that.indexss = index_c || 0;
      //     // console.log(that.con);
      //     // console.log(that.con[0], "111");
      //     // this.bid = this.con.id;
      //     // console.log(this.bid);
      //   });
    },
    methods: {
      bjs() {
        let a = this.con.id;
        console.log(a);
        let data = {
          id: a
        }
        spell2(data).then((response) => {
          console.log(response);
        })
        // axios.get("/api/index/sign", {
        //   id: a
        // }).then((res) => {
        //   console.log(res);
        // });
      },
      demoa(a) {
        let that = this;
        this.demo = a;
        console.log(a);
        setTimeout(function () {
          that.demo = null;
        }, 500);
        // console.log(this.demo);
      },
      demoa1(a) {
        let that = this;
        this.demo1 = a;
        console.log(a);
        setTimeout(function () {
          that.demo1 = null;
        }, 500);
        // console.log(this.demo);
      },
      demoa2(a) {
        let that = this;
        this.demo2 = a;
        console.log(a);
        setTimeout(function () {
          that.demo2 = null;
        }, 500);
        // console.log(this.demo);
      },
      // Wordread() {
      //   let that = this;
      //   // console.log('123456789')
      //   axios.interceptors.request.use(
      //     (config) => {
      //       config.headers["token"] = localStorage.getItem("token");
      //       return config;
      //     },
      //     (error) => {
      //       // 请求报错时的操作
      //       // // console.log(error) // for debug
      //       return Promise.reject(error);
      //     }
      //   );

      //   axios
      //     .get("/api/Wordread/index", {
      //       params: { grade_id: this.grade_id, unit_id: this.unit_id },
      //     })
      //     .then((res) => {
      //       // that.list = res.data.data.jincheng.data.arr;
      //       // console.log(res.data.data, "111");
      //       // this.zonglis = res.data.data;

      //       that.con = res.data.data.neirong.data[0];
      //       // console.log(that.con, "111");
      //       this.zonglis = res.data.data.neirong.data;
      //       console.log(this.zonglis, "eawsredgfchb");
      //     });

      //   // axios.get("/api/Wordread/index").then((res) => {
      //   //   that.con = res.data.data.neirong[0];
      //   //   console.log(res.data.data, "111");
      //   //   this.zonglis = res.data.data;
      //   // });
      // },
      dataListFn(index) {
        this.dellist();
        let that = this;
        console.log(index);
        console.log(this.grade_id, "this.grade_id");
        console.log(this.mold_id, "this.mold_id");
        console.log(this.course_id, "this.course_id");
        // axios.interceptors.request.use(
        //   (config) => {
        //     config.headers["token"] = localStorage.getItem("token");
        //     return config;
        //   },
        //   (error) => {
        //     // 请求报错时的操作
        //     // // console.log(error) // for debug
        //     return Promise.reject(error);
        //   }
        // );
        axios
          .get("/api/unit/index", {
            params: {
              grade_id: this.grade_id,
              mold_id: this.mold_id,
              course_id: this.course_id,
            },
          })
          .then((res) => {
            // that.list = res.data.data.jincheng.arr;
            that.list = res.data.data.danyuanjincheng.arr;
            console.log(that.list, "133");
            // this.zonglis = res.data.data;
            this.dellist();
            console.log(res, 'chvjbnk')
          });
      },
      tiao() {
        let that = this;
        axios
          .get("/api/unit/index", {
            params: {
              grade_id: this.grade_id,
              mold_id: this.mold_id,
              course_id: this.course_id,
            },
          })
          .then((res) => {
            that.list = res.data.data.jincheng.data.total;
            console.log(res, "112");
          });
      },
      //分页
      // btnClick: function (data) {
      //   let that = this;
      //   let as = data;
      //   console.log(as);
      //   axios.get("/api/WordSpell/index", { params: { id: as } }).then((res) => {
      //     console.log(res);
      //     that.cons = res.data.data;
      //     console.log(this.cons);
      //     that.con = this.cons.neirong[0];
      //     // console.log(that.con);
      //     // console.log(that.con[0], "111");
      //   });
      // },
      select(index) {
        this.list_in = index;
        this.unit_id = this.list_in + 1;
        // console.log(this.list_in,'in')
        // console.log(this.unit_id,'this.unit_id')
        this.Wordread();
      },
      dellist(index, stop) {
        let arr = this.list;
        this.show_list = arr.slice(index || 0, stop || 6);
        console.log(this.show_list);
      },
      next() {
        this.list_in += 1;
        if (this.list_in == 6) {
          this.dellist(6, 12);
          this.list_in = 0;
          this.start = 5;
          this.stop = 12;
        }
        this.unit_id = this.list_in + 1;
        console.log(this.unit_id, "list_in");
        this.Wordread();
      },
      before() {
        this.list_in -= 1;
        if (this.start == 5 && this.list_in == -1) {
          this.dellist(0, 6);
          this.list_in = 5;
          this.start = 12;
          this.stop = 0;
        }
        this.unit_id = this.list_in + 1;
        // console.log(this.unit_id,'list_in')
        this.Wordread();
      },
      back() {
        this.$router.push("index");
      },
      // 传过去
      nextt() {
        let that = this;
        // console.log(that.sz);
        let b = this.sz.join("");
        console.log(b);
        // 获取单词
        //下一个

        // let ind = that.indexss + 1;
        // that.con = this.cons.neirong[ind];
        // console.log(that.con)
        // this.indexss = ind;

        //换页面
        // console.log(ind, 2223);

        this.$router.push({
          path: "/SpellWord",
          query: {
            index_s: that.indexss,
            id: this.ida,
            conmain: b
          },
        });

        // 清空
        this.sz = [];
        let str = " ";
        for (let x = 0; x < 60; x++) {
          this.sz[x] = str;
          // console.log(this.sz)
        }
      },
      word(a) {
        if (a == "SPACE") {
          let arr = this.sz;
          arr.splice(this.sz_index, 1, " ");
          this.sz = arr;
          this.sz_index = this.sz_index + 1;
        } else if (a == "DELETE") {
          if (this.sz_index != 0) {
            this.sz_index = this.sz_index - 1;
            let arr = this.sz;
            arr.splice(this.sz_index, 1, " ");
            this.sz = arr;
          }
        } else if (a == "小写") {
          let boards = this.boards;
          // this.demoa = 0
          for (let i = 0; i < boards.length; i++) {
            // boards[i] = boards[i].toLowerCase();
            boards.splice(i, 1, boards[i].toLowerCase());
          }
          // boards.splice(this.boards, 1, " ");
          for (let i = 0; i < this.boardsb.length; i++) {
            this.boardsb[i] = this.boardsb[i].toLowerCase();
          }
          for (let i = 0; i < this.boardsc.length; i++) {
            this.boardsc[i] = this.boardsc[i].toLowerCase();
          }
          console.log(this.boardsc);
          this.boardsc[0] = "大写";
        } else if (a == "大写") {
          let boards = this.boards;
          for (let i = 0; i < this.boards.length; i++) {
            // this.boards[i] = this.boards[i].toUpperCase();
            boards.splice(i, 1, boards[i].toUpperCase());
          }
          for (let i = 0; i < this.boardsb.length; i++) {
            this.boardsb[i] = this.boardsb[i].toUpperCase();
          }
          for (let i = 0; i < this.boardsc.length; i++) {
            this.boardsc[i] = this.boardsc[i].toUpperCase();
          }
          console.log(this.boardsc);
          this.boardsc[0] = "小写";
        } else {
          let arr = this.sz;
          arr.splice(this.sz_index, 1, a);
          this.sz = arr;
          this.sz_index = this.sz_index + 1;
        }
      },
    },
    watch: {
      list_in() {
        console.log(this.list_in);
      },
    },
    computed: {
      //分页
      // indexs: function () {
      //   let left = 1;
      //   let right = this.all;
      //   let ar = [];
      //   if (this.all >= 5) {
      //     if (this.cur > 3 && this.cur < this.all - 2) {
      //       left = this.cur - 2;
      //       right = this.cur + 2;
      //     } else {
      //       if (this.cur <= 3) {
      //         left = 1;
      //         right = 5;
      //       } else {
      //         right = this.all;
      //         left = this.all - 4;
      //       }
      //     }
      //   }
      //   while (left <= right) {
      //     ar.push(left);
      //     left++;
      //   }
      //   return ar;
      // },
    },
    mounted() {},
  };

</script>

<style lang="scss" scoped>
  .page-bar {
    margin: 40px auto;
    margin-top: 150px;

    .size {
      margin-bottom: 1rem;
    }
  }

  ul,
  li {
    margin: 0px;
    padding: 0px;
  }

  li {
    list-style: none;
  }

  .page-bar li:first-child>a {
    margin-left: 0px;
  }

  .page-bar a {
    text-decoration: none;
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 2rem;
    color: #fff;
    cursor: pointer;
    width: 100%;
    // margin-right: 20px;
  }

  .page-bar a:hover {
    // background-color: #eee;
    color: #05d380;
  }

  .page-bar a.banclick {
    cursor: not-allowed;
    padding-left: 30%;
  }

  // .page-bar a.banclick img {
  //   width: 80%;
  // }
  .page-bar .active a {
    color: #fff;
    cursor: default;
    color: #05d380;
  }

  .page-bar i {
    font-style: normal;
    color: #d44950;
    margin: 0px 4px;
    font-size: 12px;
  }

  .back {
    background: #3571ff !important;
    color: #fff !important;
  }

  .bottom {
    // border: 1px solid red;
    display: flex;
    justify-content: space-between;
    width: 50%;
    margin: 30px auto;

    span {
      width: 200px;
      // border: 1px solid red;
      display: block;
      height: 50px;
      text-align: center;
      line-height: 50px;
      border-radius: 10px;
      cursor: pointer;
    }

    .span1 {
      background: #8556ec;
      color: #fff;
    }

    .span2 {
      background: #0dd685;
      color: #fff;
    }
  }

  /*分页*/
  .page-bar {
    margin: 40px auto;
    margin-top: 150px;

    .size {
      margin-bottom: 1rem;
    }
  }

  ul,
  li {
    margin: 0px;
    padding: 0px;
  }

  li {
    list-style: none;
  }

  .page-bar li:first-child>a {
    margin-left: 0px;
  }

  .page-bar a {
    text-decoration: none;
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 2rem;
    color: #fff;
    cursor: pointer;
    // margin-right: 20px;
  }

  .page-bar a:hover {
    // background-color: #eee;
    color: #05d380;
  }

  .page-bar a.banclick {
    cursor: not-allowed;
    padding-left: 30%;
  }

  // .page-bar a.banclick img {
  //   width: 80%;
  // }
  .page-bar .active a {
    color: #fff;
    cursor: default;
    color: #05d380;
  }

  .page-bar i {
    font-style: normal;
    color: #d44950;
    margin: 0px 4px;
    font-size: 12px;
  }

  .word {
    width: 100%;

    .search {
      width: 98%;
      padding: 0 1%;
      height: 40px;
      line-height: 40px;
      background-color: #3571ff;
      color: #fff;
      display: flex;
      justify-content: space-between;
      padding-bottom: 3px;

      .wen {
        width: 24%;
        position: relative;

        input {
          width: 100%;
          background: #ffffff;
          border-radius: 24px;
          border: 1px solid #fff;
          height: 28px;
          line-height: 28px;
          text-indent: 2.4em;
        }

        .pos {
          position: absolute;
          left: 6px;
          top: 13px;
          width: 4.5%;
        }
      }

      >img {
        width: 1%;
        height: 22px;
        margin-top: 8px;
      }
    }

    .con {
      width: 99%;
      margin-left: 1%;
      display: flex;
      justify-content: space-between;

      .left {
        width: 14%;
        background-color: #000;
        opacity: 0.7;
        color: #fff;
        margin-top: 0.6rem;

        .btn {
          img {
            width: 12%;
            // margin-left: 44%;
            margin: 1rem 44% 1rem;
          }
        }

        .list {
          margin: 2rem 0;
          margin-left: 20%;

          .size {
            font-size: 14px;
          }
        }
      }

      .right {
        width: 88%;
        border: 1px solid red;
        // margin: 0 auto;
        background-color: #f5f5f5;
        padding-bottom: 6.4rem;

        .tops {
          width: 1220px;
          margin: 0 auto;
          // border: 1px solid red;
          display: flex;
          justify-content: left;
          flex-wrap: wrap;
          height: 100px;

          .tab {
            border: 1px solid red;
            width: 98px;
            height: 98px;
            line-height: 98px;
            text-align: center;
            font-size: 32px;
          }
        }

        .keyboard {
          // border: 1px solid red;
          margin-top: 10px;
          padding-bottom: 100px;

          .board {
            width: 60%;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;

            .boards {
              margin-top: 20px;
              font-size: 52px;
              font-family: Arial;
              font-weight: bold;
              color: #666666;
              width: 63px;
              height: 88px;
              background: #f2f2f2;
              border: 1px solid rgba(0, 0, 0, 0.15);
              box-shadow: 0px 1px 0px 0px #ffffff;
              border-radius: 10px;
              float: left;
              text-align: center;
              line-height: 88px;
            }

            .boardsss {
              width: 40%;
            }
          }

          .board {
            .boardss:nth-child(1) {
              color: red;
              font-size: 20px;
              width: 100px;
            }
          }
        }
      }
    }
  }

</style>
